<template>
	<div class="wrapper">
		<header class="main-header">
			<a href="/" class="logo">
				<!-- mini logo for sidebar mini 40x50 pixels -->
				<span class="logo-mini"><img src="/static/img/logo_sm.png" alt="Logo"
											 class="img-responsive center-block"></span>
				<!-- logo for regular state and mobile devices -->
				<div class="container logo-lg">
					<div class="pull-left image"><img src="/static/img/logo_sm.png" alt="Logo" class="img-responsive">
					</div>
					<div class="pull-left info">安信分期</div>
				</div>
			</a>

			<!-- Header Navbar -->
			<nav class="navbar navbar-static-top" role="navigation">
				<!-- Sidebar toggle button-->
				<a href="javascript:;" class="sidebar-toggle" data-toggle="offcanvas" role="button">
					<span class="sr-only">Toggle navigation</span>
				</a>
				<!-- Navbar Right Menu -->
				<div class="navbar-custom-menu">
					<ul class="nav navbar-nav">
						<!-- Messages-->
						<!--<li class="dropdown messages-menu">-->
							<!--<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">-->
								<!--<i class="fa fa-envelope-o"></i>-->
								<!--<span class="label label-success">{{ state.userInfo.messages | count }}</span>-->
							<!--</a>-->
							<!--<ul class="dropdown-menu">-->
								<!--<li class="header">You have {{ state.userInfo.messages | count }} message(s)</li>-->
								<!--<li v-if="state.userInfo.messages.length > 0">-->
									<!--&lt;!&ndash; inner menu: contains the messages &ndash;&gt;-->
									<!--<ul class="menu">-->
										<!--<li>&lt;!&ndash; start message &ndash;&gt;-->
											<!--<a href="javascript:;">-->
												<!--&lt;!&ndash; Message title and timestamp &ndash;&gt;-->
												<!--<h4>-->
													<!--Support Team-->
													<!--<small><i class="fa fa-clock-o"></i> 5 mins</small>-->
												<!--</h4>-->
												<!--&lt;!&ndash; The message &ndash;&gt;-->
												<!--<p>Why not consider this a test message?</p>-->
											<!--</a>-->
										<!--</li>-->
										<!--&lt;!&ndash; end message &ndash;&gt;-->
									<!--</ul>-->
									<!--&lt;!&ndash; /.menu &ndash;&gt;-->
								<!--</li>-->
								<!--<li class="footer" v-if="state.userInfo.messages.length > 0"><a href="javascript:;">See-->
									<!--All Messages</a>-->
								<!--</li>-->
							<!--</ul>-->
						<!--</li>-->
						<!-- /.messages-menu -->

						<!-- Notifications Menu -->
						<!--<li class="dropdown notifications-menu">-->
							<!--<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">-->
								<!--<i class="fa fa-bell-o"></i>-->
								<!--<span class="label label-warning">{{ state.userInfo.notifications | count }}</span>-->
							<!--</a>-->
							<!--<ul class="dropdown-menu">-->
								<!--<li class="header">You have {{ state.userInfo.notifications | count }} notification(s)-->
								<!--</li>-->
								<!--<li v-if="state.userInfo.notifications.length > 0">-->
									<!--&lt;!&ndash; Inner Menu: contains the notifications &ndash;&gt;-->
									<!--<ul class="menu">-->
										<!--<li>&lt;!&ndash; start notification &ndash;&gt;-->
											<!--<a href="javascript:;">-->
												<!--<i class="fa fa-users text-aqua"></i> 5 new members joined today-->
											<!--</a>-->
										<!--</li>-->
										<!--&lt;!&ndash; end notification &ndash;&gt;-->
									<!--</ul>-->
								<!--</li>-->
								<!--<li class="footer" v-if="state.userInfo.notifications.length > 0"><a-->
									<!--href="javascript:;">View all</a>-->
								<!--</li>-->
							<!--</ul>-->
						<!--</li>-->

						<!-- Tasks Menu -->
						<!--<li class="dropdown tasks-menu">-->
							<!--<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">-->
								<!--<i class="fa fa-flag-o"></i>-->
								<!--<span class="label label-danger">{{ state.userInfo.tasks | count }} </span>-->
							<!--</a>-->
							<!--<ul class="dropdown-menu">-->
								<!--<li class="header">You have {{ state.userInfo.tasks | count }} task(s)</li>-->
								<!--<li v-if="state.userInfo.tasks.length > 0">-->
									<!--&lt;!&ndash; Inner menu: contains the tasks &ndash;&gt;-->
									<!--<ul class="menu">-->
										<!--<li>&lt;!&ndash; Task item &ndash;&gt;-->
											<!--<a href="javascript:;">-->
												<!--&lt;!&ndash; Task title and progress text &ndash;&gt;-->
												<!--<h3>-->
													<!--Design some buttons-->
													<!--<small class="pull-right">20%</small>-->
												<!--</h3>-->
												<!--&lt;!&ndash; The progress bar &ndash;&gt;-->
												<!--<div class="progress xs">-->
													<!--&lt;!&ndash; Change the css width attribute to simulate progress &ndash;&gt;-->
													<!--<div class="progress-bar progress-bar-aqua" style="width: 20%"-->
														 <!--role="progressbar"-->
														 <!--aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">-->
														<!--<span class="sr-only">20% Complete</span>-->
													<!--</div>-->
												<!--</div>-->
											<!--</a>-->
										<!--</li>-->
										<!--&lt;!&ndash; end task item &ndash;&gt;-->
									<!--</ul>-->
								<!--</li>-->
								<!--<li class="footer" v-if="state.userInfo.tasks.length > 0">-->
									<!--<a href="javascript:;">View all tasks</a>-->
								<!--</li>-->
							<!--</ul>-->
						<!--</li>-->

						<!-- User Account Menu -->
						<li class="dropdown user user-menu">
							<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
								<!-- The user image in the navbar-->
								<!--<img :src=demo.avatar class="user-image" alt="User Image">-->
								<!-- hidden-xs hides the username on small devices so only the image appears. -->
								<span class="hidden-xs">{{ state.user.name }}</span>
							</a>
							<ul class="dropdown-menu">
								<!-- User image -->
								<!--<li class="user-header">-->
									<!--<img :src=demo.avatar class="img-circle" alt="User Image">-->

									<!--<p>-->
										<!--Alexander Pierce - Web Developer-->
										<!--<small>Member since Nov. 2012</small>-->
									<!--</p>-->
								<!--</li>-->
								<!-- Menu Body -->
								<li class="user-body">
									<div class="row">
										<div class="col-xs-4 text-center">
											<a href="#">Followers</a>
										</div>
										<div class="col-xs-4 text-center">
											<a href="#">Sales</a>
										</div>
										<div class="col-xs-4 text-center">
											<a href="#">Friends</a>
										</div>
									</div>
									<!-- /.row -->
								</li>
								<!-- Menu Footer-->
								<li class="user-footer">
									<div class="pull-left">
										<a href="#" class="btn btn-default btn-flat">管理账号</a>
									</div>
									<div class="pull-right">
										<a href="#" class="btn btn-default btn-flat" @click="logout">登出</a>
									</div>
								</li>
							</ul>
						</li>
					</ul>
				</div>
			</nav>
		</header>
		<!-- Left side column. contains the logo and sidebar -->
		<aside class="main-sidebar">

			<!-- sidebar: style can be found in sidebar.less -->
			<section class="sidebar">

				<!-- Sidebar user panel (optional) -->
				<!--<div class="user-panel">-->
					<!--<div class="pull-left image">-->
						<!--<img :src=demo.avatar class="img-circle" alt="User Image">-->
					<!--</div>-->
					<!--<div class="pull-left info">-->
						<!--<div><p class="white">{{ demo.displayName }}</p></div>-->
						<!--<a href="javascript:;"><i class="fa fa-circle text-success"></i> Online</a>-->
					<!--</div>-->
				<!--</div>-->

				<!-- search form (Optional) -->
				<form @submit.prevent class="sidebar-form">
					<div class="input-group">
						<input type="text" name="search" id="search" class="search form-control" data-toggle="hideseek"
							   placeholder="在菜单中搜索" data-list=".sidebar-menu">
							<span class="input-group-btn">
								<button type="submit" name="search" id="search-btn" class="btn btn-flat"><i
									class="fa fa-search"></i>
								</button>
							</span>
					</div>
				</form>
				<!-- /.search form -->

				<!-- Sidebar Menu -->
				<ul class="sidebar-menu">
					<router-link tag="li" to="/" exact>
						<a><i class="fa fa-desktop"></i><span>审查</span></a>
					</router-link>
					<router-link tag="li" to="/approvalManagement">
						<a><i class="fa fa-edit"></i><span>审批</span></a>
					</router-link>
					<router-link tag="li" to="/approvalRecord">
						<a><i class="fa fa-book"></i><span>审批记录查询</span></a>
					</router-link>
					<router-link tag="li" to="/blacklist">
						<a><i class="fa fa-th"></i><span>黑名单管理</span></a>
					</router-link>
					<router-link tag="li" to="/repayment">
						<a><i class="fa fa-money"></i><span>还款管理</span></a>
					</router-link>
					<router-link tag="li" to="/user">
						<a><i class="fa fa-user"></i><span>用户管理</span></a>
					</router-link>
					<!--<router-link tag="li" to="/level">-->
						<!--<a><i class="fa fa-tasks"></i><span>等级管理</span></a>-->
					<!--</router-link>-->
					<!--为了能渲染父节点的active,使用router-link但是禁用掉了跳转 -->
					<router-link tag="li" to="/dataReport" class="treeview">
						<a onclick="return false;">
							<i class="fa fa-folder"></i>
							<span>数据上报</span>
							<span class="pull-right-container">
								<i class="fa fa-angle-left pull-right"></i>
							</span>
						</a>
						<ul class="treeview-menu">
							<router-link tag="li" to="/dataReport/onlineSigning" class="padding-left-15">
								<a><i class="fa fa-link"></i><span>实时网签</span></a>
							</router-link>
							<!--<router-link tag="li" to="/dataReport/authorizationAmount" class="padding-left-15">-->
								<!--<a><i class="fa fa-link"></i><span>授信额度信息上报</span></a>-->
							<!--</router-link>-->
							<!--<router-link tag="li" to="/dataReport/loanContract" class="padding-left-15">-->
								<!--<a><i class="fa fa-link"></i><span>贷款合同信息上报</span></a>-->
							<!--</router-link>-->
							<!--<router-link tag="li" to="/dataReport/loanOrigination" class="padding-left-15">-->
								<!--<a><i class="fa fa-link"></i><span>贷款发放信息上报</span></a>-->
							<!--</router-link>-->
							<!--<router-link tag="li" to="/dataReport/loanRecovery" class="padding-left-15">-->
								<!--<a><i class="fa fa-link"></i><span>贷款回收信息上报</span></a>-->
							<!--</router-link>-->
							<!--<router-link tag="li" to="/dataReport/repaymentPlan" class="padding-left-15">-->
								<!--<a><i class="fa fa-link"></i><span>还款计划信息上报</span></a>-->
							<!--</router-link>-->
							<!--<router-link tag="li" to="/dataReport/improperUserinfo" class="padding-left-15">-->
								<!--<a><i class="fa fa-link"></i><span>非正常客户信息上报</span></a>-->
							<!--</router-link>-->
							<!--<router-link tag="li" to="/dataReport/signingDocument" class="padding-left-15">-->
								<!--<a><i class="fa fa-link"></i><span>网签文件上报</span></a>-->
							<!--</router-link>-->
							<router-link tag="li" to="/dataReport/reportResult" class="padding-left-15">
								<a><i class="fa fa-link"></i><span>上报结果查询</span></a>
							</router-link>
						</ul>
					</router-link>
					<!--<router-link tag="li" to="/itemScore" class="treeview">-->
						<!--<a onclick="return false;">-->
							<!--<i class="fa fa-ticket"></i>-->
							<!--<span>评分卡管理</span>-->
							<!--<span class="pull-right-container">-->
								<!--<i class="fa fa-angle-left pull-right"></i>-->
							<!--</span>-->
						<!--</a>-->
						<!--<ul class="treeview-menu">-->
							<!--<router-link tag="li" to="/itemScore/age" class="padding-left-15">-->
								<!--<a><i class="fa fa-link"></i><span>年龄</span></a>-->
							<!--</router-link>-->
							<!--<router-link tag="li" to="/itemScore/education" class="padding-left-15">-->
								<!--<a><i class="fa fa-link"></i><span>最高学历</span></a>-->
							<!--</router-link>-->
							<!--<router-link tag="li" to="/itemScore/companyNature" class="padding-left-15">-->
								<!--<a><i class="fa fa-link"></i><span>公司性质</span></a>-->
							<!--</router-link>-->
							<!--<router-link tag="li" to="/itemScore/marriage" class="padding-left-15">-->
								<!--<a><i class="fa fa-link"></i><span>性别与婚姻状况</span></a>-->
							<!--</router-link>-->
							<!--<router-link tag="li" to="/itemScore/seniority" class="padding-left-15">-->
								<!--<a><i class="fa fa-link"></i><span>当前单位工作年限（年）</span></a>-->
							<!--</router-link>-->
							<!--<router-link tag="li" to="/itemScore/loanDuration" class="padding-left-15">-->
								<!--<a><i class="fa fa-link"></i><span>贷款期限（月）</span></a>-->
							<!--</router-link>-->
							<!--<router-link tag="li" to="/itemScore/salaryMode" class="padding-left-15">-->
								<!--<a><i class="fa fa-link"></i><span>发薪方式</span></a>-->
							<!--</router-link>-->
						<!--</ul>-->
					<!--</router-link>-->
				</ul>
			</section>
			<!-- /.sidebar -->
		</aside>

		<!-- Content Wrapper. Contains page content -->
		<div class="content-wrapper">
			<!-- Content Header (Page header) -->
			<section class="content-header">
				<h1>
					{{$route.name}}
					<small> {{$route.meta.description}}</small>
				</h1>
				<ol class="breadcrumb">
					<li><a href="javascript:;"><i class="fa fa-home"></i>首页</a></li>
					<li class="active">{{$route.name}}</li>
				</ol>
			</section>
			<router-view></router-view>

		</div>

		<!-- /.content-wrapper -->

		<!-- Main Footer -->
		<footer class="main-footer">
			<strong>Copyright &copy; {{year}} <a href="javascript:;">CoPilot</a>.</strong> All rights reserved.
		</footer>
	</div>
	<!-- ./wrapper -->
</template>

<script type="text/ecmascript-6">
	import faker from 'faker'

	export default {
		data: function () {
			return {
				section: 'Dash',
				me: '',
				error: '',
				api: {
					servers: {
						url: '', // Back end server
						result: []
					}
				}
			}
		},
		computed: {
			state: function () {
				return this.$store.state
			},
			demo: function () {
				return {
					displayName: faker.name.findName(),
					avatar: faker.image.avatar(),
					email: faker.internet.email(),
					randomCard: faker.helpers.createCard()
				}
			},
			year: function () {
				var y = new Date()
				return y.getFullYear()
			}
		},
		methods: {
			logout(){
				this.$store.dispatch('userLogout',{
					username:this.$store.state.user.name,
					token:this.$store.state.user.token
				}).then(() => {
					this.$router.push('/login');
				}).catch(()=>{

				})
			}
		},
		mounted: function () {
			// Page is ready. Let's load our functions!
			require('hideseek');
			require("../../../static/libs/adminLTE/js/app.js")

		}
	}
</script>

<style>
	.user-panel {
		height: 4em;
	}
</style>
